<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">信息公告</block>
		</cu-custom>
		
		<view v-if="isInit">			
			
			<uniSticky>
				<navLongTab :tabTitle="tabs" @changeTab="changeTab"></navLongTab>
			</uniSticky>
			
			<view :style="'height:'+screenHeight+'px'">
				<mescroll-uni ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
							
					<mescroll-empty v-if="emptyList"></mescroll-empty>
									
					<view class="cu-card case">
						<!-- 信息部分 begin -->					
							<view class="cu-item shadow" v-if="list.length>0" v-for="(item,index) in list" :key="index">						
								<view class="padding-sm solid-bottom padding-lr">								
									<text>[{{item.messageTypeStr}}]</text>
									<text class="margin-left-sm">{{item.message}}</text>
									<text v-if="tabNow==0" class="margin-left-sm text-blue" @tap="goDetail(item)">[详情]</text>
									<text class="margin-left-sm text-grey">{{getDateDiff(item.createTime)}}</text>
								</view>
							</view>
						<!-- 信息部分 end -->
					</view>
					
				</mescroll-uni>
			</view>
			
		</view>
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import {getDateDiff} from "@/utils/date/date.js"	
	import navLongTab from "@/components/tab/navLongTab.vue"
	import uniSticky from "@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody,navLongTab,uniSticky
		},
		data() {
			return {
				screenHeight:this.s_h_nob-80,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无景点评价',
					},
					textNoMore:'-- 没有更多评价 --',
					toTop:{
						offset:200,
						bottom: '210rpx',
					}
				},
				isInit:false,
				list:[],
				tabNow:0,
				tabs:[{name:'信息'},{name:'公告'}]
			}
		},
		onLoad() {
			this.$api.post('/guest/page',{p:1}).then(res => {
				
			})
			
			setTimeout(()=>this.isInit=true,500)
		},
		methods: {
			changeTab(index){
				this.tabNow=index
				this.list=[]
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll();
				})	
			},
			getDateDiff(date){
				return getDateDiff(date)
			},
			goDetail(item){
				if(item.messageType==1){
					uni.navigateTo({
						url:'/pages/my/suggestion/suggestion_list?id='+item.dataId
					})
				}
				if(item.messageType==1){
					uni.navigateTo({
						url:'/pages/my/recommend/recommend_list?id='+item.dataId
					})
				}
			},
			//页面数据请求事件
			upCallback(page) {
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"page":pageNum,
				}
				
				let url="/user/message_page"
				if(this.tabNow==1){
					url='/guest/page'
				}
				
				_this.$api.post(url,params).then(res => {
					let data=res.data;
					
					let curPageData = data.records;
					let curPageLen=curPageData.length
					let totalSize=data.total;
					
					if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);
				})
			},
		}		
	}
</script>

<style scoped>
</style>